/* eslint no-underscore-dangle: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import targetImg from '@/assects/images/ren.png';
import { AREA_MAP } from './AreaMap';


const CANVAS_WIDTH = 400;
const CANVAS_HEIGHT = 600;


export default class wwwCanvas extends Component {
    constructor(props) {
        super(props);

        this.state = {
        };
        this.init = this.init.bind(this);
        this.drawBgImg = this.drawBgImg.bind(this);
        this.drawArea = this.drawArea.bind(this);
        this.clearScreen = this.clearScreen.bind(this);
        this.getAreaByPrecent = this.getAreaByPrecent.bind(this);
        this.doKill = this.doKill.bind(this);
    }

    componentDidMount() {
        this.init();
    }

  init = async () => {
      await this.drawBgImg();
  }

  drawBgImg = () => new Promise((resolve) => {
      const img = new Image();
      img.src = targetImg;
      const ctx = this.getCtx();
      img.onload = function () {
          ctx.drawImage(img, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
          resolve();
      };
  })

  translateCenter = () => {

  }


  /**
   * 获取矩形的区域
   * @param {*} xp 左上角的x百分比坐标eg:40%
   * @param {*} yp 左上角的y百分比坐标eg:10%
   * @param {*} widthp 宽度的百分比eg:20%
   * @param {*} heightp 高度的百分比eg:30%
   * @returns object带有x,y,widht,height
   */
getAreaByPrecent=({
    xp, yp, widthp, heightp,
}) => {
    const x = xp * CANVAS_WIDTH;
    const y = yp * CANVAS_HEIGHT;
    const width = (widthp - xp) * CANVAS_WIDTH;
    const height = (heightp - yp) * CANVAS_HEIGHT;
    return {
        x, y, width, height,
    };
}
  getCtx = () => {
      const c = document.getElementById('mycanvas');
      const ctx = c.getContext('2d');
      // ctx.globalCompositeOperation = 'destination-out';

      return ctx;
  }

  drawArea = item => new Promise((resolve) => {
      const ctx = this.getCtx();
      ctx.globalCompositeOperation = 'source-atop';
      ctx.fillStyle = item.color;
      ctx.beginPath();
      ctx.fillRect(item.x, item.y, item.width, item.height);
      ctx.closePath();
      ctx.fill();

      resolve();
  })

  clearScreen = async () => {
      await this.drawBgImg();
  }

  doKill = async (type) => {
      await this.clearScreen();
      let list = type === 1 ? [
      // AREA_MAP.HEAD,
          AREA_MAP.LEFT_HEART,
          // AREA_MAP.RIGHT_HEART,
          AREA_MAP.BELLY,
      ] : type === 2 ? [
      // AREA_MAP.HEAD,
      // AREA_MAP.LEFT_HEART,
          AREA_MAP.RIGHT_HEART,
      // AREA_MAP.BELLY,
      ] : [
          AREA_MAP.HEAD,
      // AREA_MAP.LEFT_HEART,
      // AREA_MAP.RIGHT_HEART,
      // AREA_MAP.BELLY,
      ];

      list = list.map(item => this.getAreaByPrecent(item));
      list.forEach(((item) => {
          this.drawArea({ ...item, color: '#E86372' });
      }));
  }

  render() {
      return (
          <div className="filter-table">

              <IceContainer>
                  <canvas id="mycanvas" style={{ background: '#f2f2f2' }} width={CANVAS_WIDTH} height={CANVAS_HEIGHT}>
            Your browser does not support the canvas element.

                  </canvas>
                  <div onClick={this.clearScreen} >
            清屏
                  </div>
                  <div onClick={() => { this.doKill(1); }} >
            刺杀1
                  </div>
                  <div onClick={() => { this.doKill(2); }} >
            刺杀2
                  </div>
                  <div onClick={() => { this.doKill(3); }} >
            刺杀3
                  </div>

              </IceContainer>
          </div>
      );
  }
}
